<template>
  <div id="debtapply">
    <c-title
      :hide="false"
      :text="
        this.member_type == 1
          ? '债权人申请'
          : this.member_type == 2
          ? '债务人申请'
          : 'VIP申请'
      "
    ></c-title>
    <div class="topBanner">
      <img :src="settingInfo.apply_top_image" alt="" />
    </div>
    <div class="fromBox">
      <div class="toptitle">
        <div class="line"></div>
        申请信息
      </div>
      <div class="flexFrom">
        <template v-if="member_type != 3">
          <!-- 使用 title 插槽来自定义标题 :required='true'-->
          <van-field
            :required="true"
            v-model="name"
            label="姓名"
            placeholder="请输入您的姓名"
            input-align="right"
          />
          <van-cell
            :required="true"
            title="性别"
            @click="sexShow = true"
            is-link
            :value="sex == '1' ? '男' : sex == '2' ? '女' : '请选择性别'"
            class="aCell"
          />
          <van-cell
            :required="true"
            title="常驻地址"
            is-link
            :value="addressOne ? addressOne : '请选择所在区域'"
            class="aCell"
            @click="showAdd = true"
          />
          <van-cell
            :required="true"
            v-if="settingInfo && settingInfo.is_street == 1"
            title="请选择街道"
            is-link
            :value="street ? street : '请选择所在街道'"
            class="aCell"
            @click="streetShow = true"
          />
          <van-field
            :required="true"
            v-model="live_address"
            label="详细地址"
            placeholder="街道门牌号等"
            input-align="right"
          />
          <van-cell
            :required="true"
            title="户籍地址"
            is-link
            :value="addressTwo ? addressTwo : '请选择所在区域'"
            class="aCell"
            @click="showAddTwo = true"
          />
          <van-cell
            :required="true"
            v-if="settingInfo && settingInfo.is_street == 1"
            title="请选择街道"
            is-link
            :value="streettwo ? streettwo : '请选择所在街道'"
            class="aCell"
            @click="streetShowtwo = true"
          />
          <van-field
            :required="true"
            v-model="source_address"
            label="户籍详细地址"
            placeholder="街道门牌号等"
            input-align="right"
          />
        </template>
        <van-field
          :required="true"
          v-model="identity_number"
          type="idcard"
          label="身份证号码"
          placeholder="请输入身份证号码"
          input-align="right"
        />

        <div class="is_card">
          <div>
            <van-cell :required="true" title="上传证件" class="aCell" />
          </div>
          <div class="is_cardUploadBox">
            <div class="is_cardUploadBoxLeft">
              <img
                :src="
                  identity_front_image_show
                    ? identity_front_image_show
                    : require('../../assets/images/debt/card.png')
                "
                alt=""
              />
              <i class="iconfont icon-guanbi" @click="closePhoto(1)" v-if="identity_front_image_show"></i>
              <div class="txta">上传身份证人像面</div>
              <div class="posUpload">
                <yz_uploader
                  ref="imgz"
                  max_count='1'
                  v-model="identity_front_image_show"
                  isCustomStyleType="debtapply"
                  v-on:inputimg="getIMg"
                  v-on:input="getIDcardZ"
                  :isCustomStyle="true"
                  :styles="isStyle"
                ></yz_uploader>
              </div>
            </div>
            <div class="is_cardUploadBoxRight">
              <img
                :src="
                  identity_back_image_show
                    ? identity_back_image_show
                    : require('../../assets/images/debt/cardF.png')
                "
                alt=""
              />
              <i class="iconfont icon-guanbi" @click="closePhoto(2)" v-if="identity_back_image_show"></i>
              <div class="txta">上传身份证国徽面</div>
              <div class="posUpload">
                <yz_uploader
                  ref="imgf"
                  max_count='1'
                  v-model="identity_back_image_show"
                  isCustomStyleType="debtapply"
                  v-on:inputimg="getIMgF"
                  v-on:input="getIDcardF"
                  :isCustomStyle="true"
                  :styles="isStyle"
                ></yz_uploader>
              </div>
            </div>
          </div>
        </div>
        <div class="is_card" v-if="member_type != 3">
          <div>
            <van-cell :required="true" title="和解协议" class="aCell" />
          </div>
          <yz_uploader
            v-model="fileList1"
            isCustomStyleType="debtapply"
            v-on:inputimg="getIMgagreement"
            :isCustomStyle="true"
            :styles="isStyle"
          ></yz_uploader>
        </div>
        <div class="is_card" v-if="member_type == 2">
          <div>
            <van-cell :required="true" title="营业执照" class="aCell" />
          </div>
          <yz_uploader
            v-model="fileList1"
            isCustomStyleType="debtapply"
            v-on:inputimg="getIMgbusiness_pics"
            :isCustomStyle="true"
            :styles="isStyle"
          ></yz_uploader>
        </div>
        <div class="is_card" v-if="member_type != 3">
          <div>
            <van-cell :required="true" title="补充材料" class="aCell" />
          </div>
          <yz_uploader
            v-model="fileList1"
            isCustomStyleType="debtapply"
            v-on:inputimg="getIMganother_pics"
            :isCustomStyle="true"
            :styles="isStyle"
          ></yz_uploader>
        </div>
        <template v-if="member_type == 1">
          <van-field
            @blur="searchInp"
            :required="true"
            v-model="debtor_uid"
            label="绑定债务人"
            placeholder="请输入债务人会员ID"
            input-align="right"
          />
          <van-cell
            :required="true"
            title="债务人名称"
            :value="showUserC.nickname"
            class="aCell deacell"
          />
        </template>
        <template v-if="member_type == 3">
          <van-field
            @blur="searchInp"
            readonly
            :required="true"
            v-model="Vip_uid.uid"
            label="联名消费的债权人"
            placeholder="请输入债权人会员ID"
            input-align="right"
          />
          <van-cell
            :required="true"
            title="债权人名称"
            :value="Vip_uid.nickname"
            class="aCell deacell"
          />
        </template>
      </div>
    </div>
    <div class="btnA" >
      <van-checkbox v-if="settingInfo.apply_desc" icon-size="16px" v-model="checked">
        <div class="agreement_txt" @click="introShow = true">
          阅读并同意《申请协议》
        </div>
      </van-checkbox>
    </div>
    <div class="submitBtn set-pc-style">
      <div class="sub" @click="submit">提交</div>
    </div>
    <yd-cityselect
      v-model="showAdd"
      :callback="resultAdd"
      :items="district"
    ></yd-cityselect>
    <yd-cityselect
      v-model="showAddTwo"
      :callback="resultAdd2"
      :items="district"
    ></yd-cityselect>
    <van-popup
      v-model="sexShow"
      style="width: 18.13rem; height: 11.88rem;"
      round="true"
      closeable="true"
    >
      <div class="sexShowBox">
        <div class="sexShowTxt">请选择性别</div>
        <div class="sexShowflex">
          <div
            class="sexShowflex_is"
            :class="sex == '1' ? 'sexShowflex_isColor' : ''"
            @click="selectSex(1)"
          >
            <img
              src="../../assets/images/debt/manYes.png"
              alt=""
              v-if="sex == '1'"
            />
            <img src="../../assets/images/debt/manNo.png" alt="" v-else />
            男
          </div>
          <div class="sexShowflex_txt">或</div>
          <div
            class="sexShowflex_is"
            :class="sex == '2' ? 'sexShowflex_isColor' : ''"
            @click="selectSex(2)"
          >
            <img
              src="../../assets/images/debt/womenYes.png"
              alt=""
              v-if="sex == '2'"
            />
            <img src="../../assets/images/debt/womenNo.png" alt="" v-else />
            女
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="streetShow"
      position="right"
      style="width: 100%; height: 100%;"
    >
      <van-nav-bar title="选择街道" class="pcStyle_ydT">
        <template #left>
          <span>
            <van-icon
              name="arrow-left"
              size="18"
              @click.native="streetShow = false"
              color="#333"
            />
          </span>
        </template>
      </van-nav-bar>
      <van-cell
        :border="flase"
        center
        v-for="(item, i) in districtVal"
        :key="i"
        @click.native="streetConfirm(item)"
        title-style="text-align:left"
      >
        <span slot="title">{{ item.areaname }}</span>
      </van-cell>
    </van-popup>
    <van-popup
      v-model="streetShowtwo"
      position="right"
      style="width: 100%; height: 100%;"
    >
      <van-nav-bar title="选择街道" class="pcStyle_ydT">
        <template #left>
          <span>
            <van-icon
              name="arrow-left"
              size="18"
              @click.native="streetShowtwo = false"
              color="#333"
            />
          </span>
        </template>
      </van-nav-bar>
      <van-cell
        :border="flase"
        center
        v-for="(item, i) in districtVal"
        :key="i"
        @click.native="streetConfirm(item, 'streetShowtwo')"
        title-style="text-align:left"
      >
        <span slot="title">{{ item.areaname }}</span>
      </van-cell>
    </van-popup>
    <van-popup
      v-model="introShow"
      style="width: 90%; height: 60%; border-radius: 1rem;"
    >
      <div class="introBox">
        <div class="titleS">申请协议</div>
        <div v-html="settingInfo.apply_desc"></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import debtapply_controller from "./debtapply_controller";

export default debtapply_controller;
</script>
<style lang="scss" scoped>
.titleS {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.introBox {
  padding: 0.63rem 0.625rem 2rem 0.625rem;
  text-align: left;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
}

#debtapply {
  background: #fff;

  .topBanner {
    margin: 0.94rem 1rem 1.72rem 1rem;
    height: 10.53rem;
    background: #666;
    border-radius: 0.35rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 0.35rem;
    }
  }

  .sexShowBox {
    height: 100%;
    overflow: hidden;

    .sexShowTxt {
      font-size: 0.94rem;
      color: #202020;
      margin-top: 1.06rem;
      margin-bottom: 2.66rem;
    }

    .sexShowflex {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .sexShowflex_isColor {
        color: #f14e4e;
      }

      .sexShowflex_txt {
        color: #d2d2d2;
      }

      .sexShowflex_is {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img {
          width: 3.69rem;
          height: 3.69rem;
          margin-bottom: 0.72rem;
        }
      }
    }
  }

  .submitBtn {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 3.44rem;
    box-shadow: 0 -0.06rem 0.66rem 0 rgba(206, 206, 206, 0.42);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .sub {
      width: 19.13rem;
      height: 2.5rem;
      background-color: #f15353;
      border-radius: 1.25rem;
      text-align: center;
      line-height: 2.5rem;
      font-size: 0.94rem;
      color: #fff;
    }
  }

  .btnA {
    width: 100%;
    height: 9.43rem;
    background: #f2f2f2;
    padding: 1rem 0.97rem;

    .agreement_txt {
      font-size: 0.63rem;
      color: #f15353;
    }
  }

  .fromBox {
    padding: 0 0.88rem;

    .flexFrom {
      overflow: hidden;

      .is_card {
        margin-bottom: 1.88rem;

        .flexBox {
          display: flex;
          flex-wrap: wrap;

          .uploadBox {
            width: 5.25rem;
            height: 5.25rem;
            border-radius: 0.31rem;
            border: dashed 0.03rem #a1a1a1;
            display: flex;
            align-items: center;
            justify-content: center;

            .van-icon {
              font-size: 2.5rem;
            }
          }
        }

        .is_cardUploadBox {
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 10.25rem;
            height: 6.31rem;
            background-color: #fff;
            border-radius: 0.47rem;
            border: solid 0.03rem #e9e9e9;
          }

          .txta {
            font-size: 0.69rem;
            color: #666;
            margin-top: 0.53rem;
          }

          .is_cardUploadBoxLeft {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .icon-guanbi {
              position: absolute;
              right: 0.25rem;
              top: 0.25rem;
              font-size: 1rem;
              z-index: 10;
            }

            .posUpload {
              position: absolute;
              left: 15%;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }
          }

          .is_cardUploadBoxRight {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .icon-guanbi {
              position: absolute;
              right: 0.25rem;
              top: 0.25rem;
              font-size: 1rem;
              z-index: 10;
            }

            .posUpload {
              position: absolute;
              left: 15%;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }
          }
        }
      }

      .van-cell {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 16px;
      }

      .van-cell--required::before {
        position: absolute;
        left: 0;
        top: 18px;
        color: #ee0a24;
        font-size: 25px;
        content: "*";
      }

      .van-cell__title {
        text-align: left;
        color: #646566;
      }

      .aCell {
        padding-right: 0;
      }

      .deacell {
        padding-right: 16px;
      }
      // .van-cell__value {
      //   color: #c8c9cc;
      // }
      // .van-cell {
      //   .van-field__label {
      //     margin-left: 12px;
      //   }
      // }

      // .van-cell__title {
      //   text-align: left;
      // }
      // .custom-title {
      //   margin-left: 0.8rem;
      //   vertical-align: middle;
      //   font-size: 0.94rem;
      // }
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // .left {
      //   display: flex;
      //   align-items: center;
      //   .must {
      //     color: #f14e4e;
      //     font-size: 1.35rem;
      //     height: 100%;
      //     display: flex;
      //     align-items: center;
      //   }
      // }
    }

    .toptitle {
      font-size: 1.13rem;
      color: #f14e4e;
      display: flex;
      align-items: center;

      .line {
        width: 0.22rem;
        height: 0.94rem;
        background-color: #f14e4e;
        border-radius: 0.11rem;
        margin-right: 0.44rem;
      }
    }
  }
}
</style>
